<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchShopName" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="$store.dispatch('getShopList',{shopName:searchShopName})"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="shopVisible=true">添加店铺</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="$store.state.isLoading"
      :data="$store.state.shop.shopList"
      :border="true"
      style="width: 100%"
    >
      <el-table-column label="创建时间" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" width="180">
        <template slot-scope="scope">{{scope.row.shopName}}</template>
      </el-table-column>
      <el-table-column label="店铺类别" width="180">
        <template slot-scope="scope">{{scope.row.shopTypeName}}</template>
      </el-table-column>
      <el-table-column label="店铺图片" width="180">
        <template slot-scope="scope">
          <img width="100" :src="scope.row.shopPic | imgUrl" alt />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="shopId=scope.row._id;shopTypeId=scope.row.shopTypeId;goodsTypeVisible=true;"
          >添加商品类别</el-button>
          <el-button size="mini" type="danger" @click="shopInfo=scope.row;shopVisible=true">修改店铺</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="$store.dispatch('deleteAllShopList',scope.row._id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageInfo action-name="getShopList" :params="{shopName:searchShopName}"></PageInfo>

    <ShopDialog :shopVisible.sync="shopVisible"></ShopDialog>
    <GoodsTypeDialog
      v-if="goodsTypeVisible"
      :shopId="shopId"
      :shopTypeId="shopTypeId"
      :goodsTypeVisible.sync="goodsTypeVisible"
    ></GoodsTypeDialog>
  </div>
</template>

<script>
import ShopDialog from "../../components/dialog/ShopDialog";
import GoodsTypeDialog from "@/components/dialog/GoodsTypeDialog";
export default {
  components: {
    ShopDialog,
    GoodsTypeDialog
  },
  props: {},
  data() {
    return {
      shopInfo: {},
      shopId: "",
      shopTypeId: "",
      shopVisible: false,
      searchShopName: "",
      goodsTypeVisible: false
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {
    this.$store.dispatch("allShopTypeList");
  }
};
</script>
<style lang="scss" scoped>
</style>